<template>
  <div>
    <div class="user-page" v-if="userInfo">
      <a-row :gutter="30">
        <a-col :span="6">
          <div class="user-left">
            <div class="user-info">
              <div class="user-img">
                <a-avatar :size="78">
                  <template #icon><UserOutlined /></template>
                </a-avatar>
                <div class="name">浅时光</div>
                <div class="describe">页码按钮的数量，当总页数超过该值时会折叠</div>
              </div>
            </div>
            <div class="user-menu">
              <a-menu v-model:selectedKeys="selectedKeys" mode="inline" @click="handleClick">
                <a-menu-item key="kanban"><ApartmentOutlined /> 我的看板</a-menu-item>
                <a-menu-item key="module"><LineChartOutlined /> 我的图表</a-menu-item>
              </a-menu>
            </div>
          </div>
        </a-col>
        <a-col :span="18">
          <div class="content-box">
            <Kanban v-if="selectedKeys[0] === 'kanban'" />
            <Module v-else />
          </div>
        </a-col>
      </a-row>
    </div>
    <notLogin v-if="userInfo === null" />
  </div>
</template>
<script>
  import {
    UserOutlined,
    DeleteOutlined,
    EditOutlined,
    ShareAltOutlined,
    LineChartOutlined,
    ApartmentOutlined,
  } from '@ant-design/icons-vue';
  import { defineComponent, ref, reactive, computed, toRefs, watch } from 'vue';
  import { useStore } from 'vuex';
  import io from '@/utils/http/index.js';
  import notLogin from '@/components/common/notLogin.vue';
  import Module from './_source/module.vue';
  import Kanban from './_source/kanban.vue';
  import { useRouter, useRoute } from 'vue-router';

  export default defineComponent({
    components: {
      UserOutlined,
      notLogin,
      DeleteOutlined,
      EditOutlined,
      ShareAltOutlined,
      LineChartOutlined,
      ApartmentOutlined,
      Module,
      Kanban,
    },
    setup() {
      const store = useStore();

      const router = useRouter();
      const route = useRoute();

      const state = reactive({
        selectedKeys: [route.query.type ? route.query.type : 'kanban'],
      });

      const handleClick = (item) => {
        router.replace({ query: { type: item.key } });
      };

      watch(
        () => route.query.type,
        (v) => {
          if (v && /\/user/.test(route.path)) {
            state.selectedKeys = [v];
          }
        }
      );

      return {
        handleClick,
        ...toRefs(state),
        userInfo: computed(() => store.state.user.userInfo),
      };
    },
  });
</script>
<style lang="scss">
  .user-page {
    padding: 20px;
    .user-left {
      background-color: #fff;
      border-radius: 4px;
    }
    .user-info {
      padding: 30px 20px;
      .user-img {
        text-align: center;
        .name {
          font-size: 16px;
          font-weight: 500;
          padding-top: 20px;
        }
        .describe {
          font-size: 12px;
          color: $text-color-secondary;
          padding-top: 5px;
        }
      }
    }
    .user-menu {
      padding: 0 0 20px 0;
    }
    .content-box {
      // min-height: calc(100vh - 100px);
    }
  }
</style>
